<template>
  <q-btn
    no-caps
    class="absolute-center"
    :class="ui.btnClass"
    :style="position"
    @click="show"
  >
    {{ $t(lang + "查看连线列表") }}
    <q-dialog v-model="visible" :persistent="needReset">
      <q-card :class="ui.cardClass" style="min-width: 400px">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">
            {{
              title ? title + $t(lang + "的连线列表") : $t(lang + "列表展示")
            }}
          </div>
          <q-space />
          <q-btn
            v-if="needReset"
            icon="close"
            flat
            round
            dense
            @click="close"
          />
          <q-toggle
            v-if="needSwitch"
            v-model="isShow"
            checked-icon="check"
            color="red"
            :label="$t(lang + '默认显示')"
            unchecked-icon="clear"
          />
        </q-card-section>

        <q-card-section>
          <q-input
            dense
            outlined
            :dark="ui.isDark"
            label="search"
            v-model="searchValueModel"
            :debounce="300"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>
          <br />
          <q-list
            bordered
            separator
            dense
            style="overflow: auto; max-height: 40vh"
          >
            <q-item v-for="(item, index) in handleOptionsList" :key="index">
              <q-item-section>{{ item.name }}</q-item-section>
              <q-item-section side>
                <q-toggle
                  color="teal-6"
                  v-model="list"
                  :val="item.id"
                  @update:model-value="update()"
                />
              </q-item-section>
            </q-item>
          </q-list>
          <!--          <q-checkbox  v-for="item in optionsList.filter(v=>v.name!==title)" :key="item.id" :dark="ui.isDark"-->
          <!--                       v-model="list" :label="item.name" :val="item.id" @update:model-value="update()"-->
          <!--                       checked-icon="task_alt" unchecked-icon="highlight_off" />-->
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-btn>
</template>

<script setup>
import { useUiStore } from "stores/ui";
import { computed, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";

const t = useI18n().t;
const lang = "MapEdit.ListShowSmall.";
const searchValueModel = ref("");
const props = defineProps({
  title: {
    type: String,
  },
  optionsList: {
    // 选项
    type: Array,
    default: () => [],
  },
  selectedList: {
    // 已选
    type: Array,
    default: () => [],
  },
  position: {
    // 悬浮按钮位置
    type: String,
    default: "top:200px",
  },
  needReset: {
    // 是否需要缓存，即退出时可选择是否重置
    type: Boolean,
    default: true,
  },
  needSwitch: {
    // 是否需要开始右上角开关
    type: Boolean,
    default: false,
  },
  switchStatus: {
    // 开关状态
    type: Boolean,
    default: false,
  },
});

const handleOptionsList = computed(() => {
  const newOptionsList = props.optionsList.filter(
    (v) => v.name !== props.title
  );
  return newOptionsList.filter((v) => {
    // 不区分大小写
    const regex = new RegExp(searchValueModel.value, "i");
    return v.name.match(regex);
  });
});

const emit = defineEmits(["update", "save", "switchChange"]);
defineExpose({ show });

const $q = useQuasar();
const ui = useUiStore();
const visible = ref(false);
const orgList = ref([]);
const list = ref();
const isShow = ref();

watch(visible, (val) => {
  if (val) {
    isShow.value = props.switchStatus;
    list.value = props.selectedList;
    orgList.value = props.selectedList;
  }
});

watch(isShow, (val) => {
  emit("switchChange", val);
});

function show() {
  visible.value = true;
}

function update() {
  emit("update", list.value);
}

function close() {
  if (JSON.stringify(orgList.value) !== JSON.stringify(list.value)) {
    $q.dialog({
      dark: ui.isDark,
      title: t(lang + "退出连线编辑"),
      message: `<span class="text-space">${t(
        lang + "是否更新连线数据"
      )}</span>`,
      html: true,
      ok: t(lang + "更新"),
      cancel: t(lang + "不更新"),
    })
      .onOk(() => {
        emit("save");
      })
      .onCancel(() => {
        list.value = orgList.value;
        update();
      });
  }
  visible.value = false;
}
</script>

<style scoped></style>
